<template>
  <div class="login_bar">
    <div class="tab_btns">
      <a
        :class="square == 0 ? 'active' : ''"
        @click="tabComponent(0, 'AccountLogin')"
        >账号登录</a
      >
      <a
        :class="square == 1 ? 'active' : ''"
        @click="tabComponent(1, 'FastLogin')"
        >快速登录</a
      >
    </div>
    <component :is="compName" ></component>
    
  </div>
</template>
<script>
import AccountLogin from "@/views/login/AccountLogin.vue";
import FastLogin from "@/views/login/FastLogin.vue";
export default {
  name: "LoginBar",
  data() {
    return {
      square: 0,
      compName: "AccountLogin",
      
    };
  },
  methods: {
    

    tabComponent(i, compName) {
      this.square = i;
      this.compName = compName;
    },

   
  },
  components: {
    AccountLogin,
    FastLogin,
  },
};
</script>

<style lang="scss" scoped>
.tab_btns {
  display: flex;
  justify-content: center;
  align-items: center;

  a {
    height: 30px;
    display: block;
    color: #999;
    font-size: 16px;

    font-weight: 700;
    padding: 0 3px ;
    margin: 0 16px;
  }
  a.active {
    // font-size: 17px;
    color: #282828;
    border-bottom: 3px solid #f35749;
  }
}


.info {
  height: 55px;
  text-align: center;
  line-height: 55px;
  font-size: 15px;
  color: #333;
  span {
    color: #fc4141;
  }
}
</style>